<template>
  <div style=" background-image: url(./src/imgs/bg.jpg); height: 100vh; background-size: cover">
    <main>
      <el-form :model="queryInfo" label-width="auto" style="max-width: 600px">
        <p class="pb16">十方智育后台管理系统</p>

        <el-form-item>
          <div style="position: relative;">
            <el-input v-model="queryInfo.userName" style="width: 350px;" placeholder="账号" prefix-icon="Avatar"
              @blur="blur1" class="pb16" />
            <p v-if="isShow" style="position: absolute;left: 0px; top: 32px; color: red; font-size: 13px;">请输入您的账号</p>
          </div>
        </el-form-item>

        <el-form-item>
          <div>
            <el-input v-model="queryInfo.password" style="width: 350px" placeholder="密码" prefix-icon="Lock"
              class="pb16" />
          </div>
        </el-form-item>

        <el-form-item>
          <div style="text-align: left;">
            <el-input v-model="input3" style="width: 220px; padding-right: 10px;" placeholder="验证码"
              prefix-icon="CircleCheck" />
            <img @click="getImgCode" :src="imgCode">
          </div>
        </el-form-item>

        <el-form-item>
          <div style="text-align: left;">
            <el-checkbox v-model="checked1" label="记住密码" style="padding: 16px 0;" />
          </div>
        </el-form-item>

        <el-form-item>
          <div>
            <el-button type="primary" style="width: 350px" @click="go">登录</el-button>
          </div>
        </el-form-item>


      </el-form>
    </main>
  </div>
</template>

<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';
import {useRouter} from 'vue-router'
import { ElMessage } from 'element-plus';

let imgCode = ref('');
let answer = ref('');
let timeId; // 计时器id
// 生成验证码
const getImgCode = () => {
  if(timeId){
    clearInterval(timeId);
  }
  axios.get('/captcha').then(res => {
    let result = res.data;
    imgCode.value = "data:image/gif;base64,"+result.data.img;
    answer.value = result.data.answer;
    timer();
  })
}
// 计时器 5秒后清空验证码
const timer = ()=>{
  timeId = setInterval(() => {
    answer.value = '';
  }, 120000);
}

onMounted(() => {
  getList();
  getImgCode();
})

let result = ref([]);
const queryInfo = ref({
 userName: 'lisi',
 password: '111',
})

const getList = ()=>{
  axios.get('user/findAll',{
    params: queryInfo.value
  })
  .then(res => {
    result.value = res.data;
    // console.log(result+"1");
  })
}

const router = useRouter();


const go = ()=> {


  axios.get('user/login', {
    params: {
     username: queryInfo.value.userName,
      password: queryInfo.value.password,
    }
  }).then((res) => {
    let result = res.data;
    if (result.code == 1) {
      if( answer.value != input3.value){
        if (answer.value == ''){
        ElMessage({
          message: '验证码过期',
          type: 'warning',
        });
        getImgCode();
        input3.value = '';
        return;
      }

        ElMessage({
          message: '验证码错误',
          type: 'warning',
        });
        getImgCode();
        input3.value = '';
        return;
      }
      ElMessage({
        message: '登录成功',
        type: 'success',
      })
      router.push('/homepage/shouye');
    }else {
      ElMessage({
        message: result.msg,
        type: 'warning',
      })
    }
  })
}

let input1 = ref('');
let input2 = ref('');
let input3 = ref('');
let isShow = ref(false);

function blur1() {
  if (queryInfo.value.userName == '') {
    isShow.value = true;
  } else {
    isShow.value = false;
  }
}

</script>

<style scoped>
*{padding: 0; margin: 0;}
.pb16{padding-bottom: 20px;}

main{background-color: white; text-align: center; width: 350px; padding: 20px; border-radius: 5px; position: fixed; top: 50%; margin-top: -200px; left: 50%; margin-left: -175px;}
img{width: 100px; vertical-align: middle; height: 32px;}
</style>